import React, { Component } from 'react';
import { NavBar, Toast, SearchBar } from 'antd-mobile'
import { Dropdown, Radio, Space } from 'antd-mobile'
import '../styles/Seach.scss'
import service from '../api'
class Seach extends Component {
    constructor(props) {
        super(props)
        this.state = {
            hotlist: [],
        }
    }
    async componentDidMount() {
        var res = await service.pro.pro_search({ keyword: this.props.location.state.keyword })
        this.setState({ hotlist: res.data.data })
    }
    render() {
        return (
            <div className='seach'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}>
                        搜索
                    </NavBar>
                </div>
                <div className="sou">
                    <SearchBar placeholder='请输入内容' />
                    <div className="btn" onClick={() => { this.props.history.push('/seach') }}>
                        搜索
                    </div>
                </div>
                <div className="shai">
                    <Dropdown>
                        <Dropdown.Item key='sorter' title='全部商品'>
                            <div style={{ padding: 12 }}>
                                全部商品
                                <br />
                                价格降序
                                <br />
                                价格升序
                                <br />
                            </div>
                        </Dropdown.Item>
                        <Dropdown.Item key='bizop' title='筛选'>
                            <div style={{ padding: 12 }}>
                                距离
                                <br />
                            </div>
                        </Dropdown.Item>
                    </Dropdown>
                </div>
                <div className="shops">
                    {
                        this.state.hotlist.map((item, index) => {
                            return (
                                <div className="name" key={index}>
                                    <div className="pic">
                                        <img src={item.img1} alt="" />
                                    </div>
                                    <div className="word">
                                        <div className="text">{item.proname}</div>
                                        <div className="price">
                                            <span>￥{item.originprice}</span>
                                            <span>销量:{item.sales}</span>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Seach;